<template>
  <div class="wrap  w-1400" :style="{background:`url(${backgroundImg}) center center/cover no-repeat`}">
    <div class="category-left">
      <div class="category-title" @click="showBanner">
        <img src="@/static/engineering5188/common/categoryIcon.png" />
        <span class="text">分类导航</span>
      </div>
      <el-menu class="el-menu">
        <el-menu-item v-for="(categoryItem, categoryIndex) in categoryList" @click="handleSelect(categoryItem)"
          :key="categoryIndex">
          <span>{{ categoryItem.title }}</span>
          <i class="el-icon-arrow-right right-arrow"></i>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="category-right">
      <component :is="currentComponent" :catId="catId" :bannerList="carouselList" @changeBanner="changeBannerFn"></component>
    </div>
  </div>
</template>
<script>
import banner from "./categoryComp/banner.vue";
import infrastructureMaterials from "./categoryComp/infrastructureMaterials.vue";

export default {
  name: "categoryMenu",
  components: {
    banner,
    infrastructureMaterials
  },
  props: [],
  data() {
    return {
      currentComponent: null,
      backgroundImg:'',
      carouselList:[],
      categeroList:[],
      catId:0,
    };
  },
  computed: {
   
    categoryList() {
      // var arr = [
      //   { title: "工程总承包单位", componentName: demoA },
      //   { title: "劳务分包单位", componentName: demoA },
      //   { title: "专业分包单位", componentName: demoA },
      //   { title: "基建材料", componentName: infrastructureMaterials },
      //   { title: "装饰材料", componentName: demoA },
      //   { title: "机电材料", componentName: demoA },
      //   { title: "市政桥梁水利材料", componentName: demoA },
      //   { title: "苗木花卉资材", componentName: demoA },
      //   { title: "石材", componentName: demoA },
      //   { title: "机械设备周转材", componentName: demoA },
      // ];
      var arr = this.categeroList;
      return arr;
    },

  },
  watch: {},

  created() { 
    this.showBanner();
    this.getProductCat();
    document.body.addEventListener('click', this.handleBodyClick);
  },
  beforeDestroy() {
    document.body.removeEventListener('click', this.handleBodyClick);
  },
  methods: {
    handleSelect(item) {
      // this.$httpApi("/api/getProductCat", {
      //     parent_id:item.id,
      //     is_tree:1,
      //   },
      //    "get"
      // )
      //   .then((res) => {
      //   
      //   });
      this.catId = item.id;
      this.currentComponent = infrastructureMaterials
    },
    handleBodyClick(event) {
      const wrapElement = this.$el;
      if (wrapElement.contains(event.target) && wrapElement !== event.target) {
        return;
      }
      this.currentComponent = banner;
    },
    showBanner(){
      this.$httpApi("/api/getBanner", {
          position:1
        },
         "get"
      )
        .then((res) => {
          res.data.forEach((item)=>{
            item.componentName = infrastructureMaterials
          })
          this.carouselList = res.data;
          this.backgroundImg = this.carouselList[0].image_url;
        });
      this.currentComponent = banner;
    },
    getProductCat(){
      this.$httpApi("/api/getProductCat", {
        parent_id: 0
        },
         "get"
      )
        .then((res) => {
          this.categeroList = res.data;
        });
    },
    changeBannerFn(index){
      this.backgroundImg = this.carouselList[index].image_url
    }
  },
};
</script>
<style scoped lang="less">
.wrap {
  height: auto;
  display: flex;
  max-width: @engineerwidth;

  .category-left {
    background-color: rgba(51, 51, 51, 0.6);
    width: 224px;

    .category-title {
      width: 100%;
      height: 52px;
      background: #31A41B;
      text-align: center;

      img {
        width: 24px;
        height: 20px;
        vertical-align: middle;
      }

      .text {
        margin-left: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        height: 52px;
        line-height: 52px;
        color: #FFFFFF;
        text-align: left;
        vertical-align: middle;
      }
    }

    .el-menu {
      background-color: transparent !important;
      border: 0px !important;

      /deep/ .el-menu-item {
        padding-left: 40px !important;
        padding-right: 24px !important;
        height: 44px !important;
        line-height: 44px !important;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          font-weight: 600;
          font-size: 16px;
          color: #fff;
          line-height: 44px;
          text-align: left;
          font-style: normal;
        }

        .right-arrow {
          font-size: 16px;
          color: #fff;
        }

        &:focus {
          background: #FFFFFF !important;

          span {
            color: #31A41B;
          }

          .right-arrow {
            font-size: 16px;
            color: #C0BFBF;
          }
        }

        &:hover {
          background: #FFFFFF !important;

          span {
            color: #31A41B;
          }

          .right-arrow {
            font-size: 16px;
            color: #C0BFBF;
          }
        }
      }

    }
  }

  .category-right {
    flex: 1;
    width: 100%;
    height: 512px;
  
  }
}
</style>
